<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/date_input.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<script src="../js/jquery-1.12.3.js"></script>
	<script src="../js/jquery.date_input.pack.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="common-tit">
				<h2>学员数据</h2>
				<span>数据统计 > 学员数据</span>
			</div>
			<div class="xdata-box">
				<h3>总计</h3>
				<ul>
					<li>
						<span>156</span>
						<em>新增学员(人)</em>
					</li>
					<li>
						<span>340</span>
						<em>缴费学员(人)</em>
					</li>
					<li>
						<span>340</span>
						<em>即将过期(人)</em>
					</li>
				</ul>
				<div id="courseCon"></div>
			</div>
			<div class="pdata-box clearfix">
				<div id="counsType"></div>
				<div id="dataSex"></div>
				<div id="dataAge"></div>
				<div id="conAbility"></div>
			</div>
		</div>
	</div>
	<script src="../js/echarts.common.min.js"></script>
	<script src="../js/common.js"></script>
	<script>
	// 导师课消
		var myChart = echarts.init(document.getElementById('courseCon'));
		var xAxisData = [];
		var data1 = [];
		var data2 = [];
		var data3 = [];
		for (var i = 0; i < 30; i++) {
			if (i < 10) {
				 xAxisData.push('2016-10-0' + (i + 1));
			} else {
				 xAxisData.push('2016-10-' + (i + 1));
			}
		   	data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		    data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
		}

		option = {
		    legend: {
		        data: ['新增学员(人)', '缴费学员(人)', '即将过期(人)'],
		        align: 'left'
		    },
		    toolbox: {
		        // y: 'bottom',
		        feature: {
		            magicType: {
		                type: ['stack', 'tiled']
		            },
		            dataView: {},
		            saveAsImage: {
		                pixelRatio: 2
		            }
		        }
		    },
		    tooltip: {},
		    xAxis: {
		        data: xAxisData,
		        silent: false,
		        splitLine: {
		            show: false
		        }
		    },
		    yAxis: {
		    },
		    toolbox: {
		         show : true,
		    },
		    dataZoom: [{
	           startValue: '2016-10-09'
	        }, {
	            type: 'inside'
	        }],
		    series: [{
		        name: '新增学员(人)',
		        type: 'bar',
		        data: data1,
		        animationDelay: function (idx) {
		            return idx * 10;
		        }
		    }, {
		        name: '缴费学员(人)',
		        type: 'bar',
		        data: data2,
		        animationDelay: function (idx) {
		            return idx * 10 + 100;
		        }
		    }, {
		        name: '即将过期(人)',
		        type: 'bar',
		        data: data3,
		        animationDelay: function (idx) {
		            return idx * 10 + 100;
		        }
		    }],
		    animationEasing: 'elasticOut',
		    animationDelayUpdate: function (idx) {
		        return idx * 5;
		    }
		};
		myChart.setOption(option);

		//消费类型占比
		var myChart1 = echarts.init(document.getElementById('counsType'));
		option1 = {
			color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
		    title : {
		        text: '消费类型占比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['次卡','售卖课程','年卡','月卡', '充值']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'次卡'},
		                {value:5, name:'售卖课程'},
		                {value:15, name:'年卡'},
		                {value:25, name:'月卡'},
		                {value:30, name: '充值'}
		            ]
		        }
		    ]
		};
		myChart1.setOption(option1);
		// 性别占比
		var myChart2 = echarts.init(document.getElementById('dataSex'));
		option2 = {
		    title : {
		        text: '性别占比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['男','女']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'男'},
		                {value:5, name:'女'}
		            ]
		        }
		    ]
		};
		myChart2.setOption(option2);
		// 年龄阶段占比
		var myChart3 = echarts.init(document.getElementById('dataAge'));
		option3 = {
		    title : {
		        text: '年龄阶段占比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['幼儿','少儿','少年','成年']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'幼儿'},
		                {value:5, name:'少儿'},
		                {value:15, name:'少年'},
		                {value:25, name:'成年'}
		            ]
		        }
		    ]
		};
		myChart3.setOption(option3);
		// 消费能力占比
		var myChart4 = echarts.init(document.getElementById('conAbility'));
		option4 = {
		    title : {
		        text: '消费能力占比',
		       	x:'14%'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        x : 'center',
		        y : 'bottom',
		        data:['0-5k','5-10k','10k-30k','30k以上']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            // dataView : {show: true, readOnly: false},
		            magicType : {
		                show: true,
		                type: ['pie', 'funnel']
		            },
		            // restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    series : [
		        {
		            name:'半径模式',
		            type:'pie',
		            radius : [20, 140],
		            center : ['50%', '50%'],
		            roseType : 'radius',
		           	lableLine: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[
		                {value:10, name:'0-5k'},
		                {value:5, name:'5-10k'},
		                {value:15, name:'10k-30k'},
		                {value:25, name:'30k以上'}
		            ]
		        }
		    ]
		};
		myChart4.setOption(option4);
	</script>
</body>
</html>